var myID = 0;
var previewTimeout;

function setUpButtons(){
	
	$('#controlArea').css({
		'margin-top': '115px',
		'height': $('#UserResultArea').height() 
	});
	
	$('#filterOptions').buttonset();
	
	$('#filterOptions').bind('change', function(){
		search();
	});
	
	$('#search_box').keyup(function(e) {
		if(e.keyCode == 13) {
			search();
		}
	});	
	
	$('#PBChartsLink').children('div').css({ 'background-color': '#b8b8b8', 'background-image': 'none' });
	
	search();
}

function search(){
	$.ajax({
		url: PicBoard.baseURL + 'rsrc.php?req=searchChart',
		dataType:'json',
		data: $('form#searchForm').serialize(),
		success: function(data){
			if(data.statusCode == 200){
				myID = data.uID;
				renderChartList(data.payload, $('input[name=areaFilter]').val());
			} else {
				alert(data.message);
			}
		},
		'type': 'post'
	});
	
}

function renderChartList(data, sType){
	table = $('<table>', { 'style': 'border:1px solid black; width: 90%; background:white' }).attr('align', 'center').append('<thead>');
	
	$(table).children('thead')
		.append($('<tr>').append(
				$('<th>', { text: 'Chart' }),
				$('<th>', { text: 'in Book' }),			
				$('<th>', { text: 'in Library' }),
				$('<th>', { text: 'Style' }),
				$('<th>', { text: 'Author' }),
				$('<th>', { text: 'View' }),
				$('<th>', { text: 'Open' }),
				$('<th>', { text: 'Manage' })
			));
	$(table).append('<tbody>');

	for(c in data){
		
		
		if(data[c].editable == "true"){
			manageLink = $('<a>', { href: "managechart?id=" + data[c].chID }).append($('<img>', { src: PicBoard.baseURL + 'images/gear.png' }) );
		} else {
			manageLink = "";
		}
		
		if(data[c].style == "defaultFormat") data[c].style = "Grid";
		
		$(table).children('tbody').append($('<tr>').data('chartData', {'identifier': parseInt(data[c].chID), 'thumbnail': data[c].thumbnail, src: data[c]  } ).append(
			$('<td>', { text: data[c].name }),
			$('<td>', { text: data[c].bookName }),			
			$('<td>', { text: data[c].library }),
			$('<td>', { text: data[c].style }),
			$('<td>', { text: data[c].ownerName }),
			$('<td>', { html: 
					$('<img>', { src: PicBoard.baseURL + 'images/folder-search-result.png', 'border':'0', 'class': 'viewLink' })
			}),
			$('<td>', { html:
				$('<a>', { href: PicBoard.baseURL + "/" + PicBoard.language + "/" + 'builder?id=' + data[c].chID }).append($('<img>', { src: PicBoard.baseURL + 'images/folder-open-slide.png', 'border': '0' }) )
			}),
			$('<td>', { html: manageLink })
			)
		);
	}

	$('#UserResultArea').html(table);
	
	// Preview pane
	$('#UserResultArea').find('img.viewLink').bind('mouseover', function(e){
		chartData = $(this).parent().parent().data('chartData');
		
		chartData.src.ownerUID = (typeof chartData.src.ownerUID == "undefined") ? 0 : chartData.src.ownerUID;
		
		if(chartData.thumbnail != null && $('#floatPreview').length == 0){
			floatDiv = $('<div>', { id: 'floatPreview', style: 'position:absolute; left:' + (e.pageX + 10) + 'px; top:' + (e.pageY + 10) + 'px; width:300px; height:300px' }).append($('<img>', { src: PicBoard.baseURL + 'imageStore/thumbnails/' + chartData.src.ownerUID + '/' + chartData.thumbnail + "?" + Math.floor ( Math.random ( ) * 101 ) }));
			$('body').append(floatDiv);
			
			clearTimeout(previewTimeout);
			
			if($('#floatPreview').children('img').height() > $('#floatPreview').children('img').width()){
				$('#floatPreview').children('img').css({ 'height':'300px', 'width':'auto' });
			} else {
				$('#floatPreview').children('img').css({ 'width':'300px', 'height':'auto' });
			}
		}
	});
	
	$('#UserResultArea').find('img.viewLink').bind('mouseout', function(){
		if($('#floatPreview').length > 0) {
			previewTimeout = setTimeout(function(){ $('#floatPreview').remove(); }, 500);
		}
	});
}


// Queue setUpButtons() to run when the document is ready.
PicBoard.addLoadEvent( "setUpButtons()" );